<template>
  <!-- 添加用户对话框 -->
  <el-dialog title="添加用户" :visible.sync="dialogVisible" @close="close" width="45%">

    <!-- 主体 -->
    <el-form ref="form" status-icon :rules="rules" :model="adduser" label-width="80px">
      <el-form-item required label="用户名" prop="username">
        <el-input v-model="adduser.username"></el-input>
      </el-form-item>
      <el-form-item required label="密码" prop="password">
        <el-input type="password" v-model="adduser.password"></el-input>
      </el-form-item>
      <el-form-item required label="确认密码" prop="checkpass">
        <el-input type="password" v-model="adduser.checkpass"></el-input>
      </el-form-item>
      <el-form-item required label="邮箱" prop="email">
        <el-input v-model="adduser.email"></el-input>
      </el-form-item>
      <el-form-item required label="手机号" prop="mobile">
        <el-input v-model="adduser.mobile"></el-input>
      </el-form-item>
    </el-form>

    <!-- 底部 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('OutdiaAdd');$refs.form.resetFields()">取消</el-button>
      <el-button type="primary" @click="btnPostUser()"> 提交 </el-button>
    </span>

  </el-dialog>
</template>

<script>
export default {
  name: 'AddUsers',
  data() {
    var validatePass = (rule, value, callback) => { //校验密码
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (value.length <= 5 || value.length >= 11) {
          callback(new Error('密码长度在5~11个字符'))
        }
        if (this.adduser.checkpass !== '') {
          this.$refs.form.validateField('checkpass')
        }
        callback()
      }
    }
    var validatocheckpass = (rule, value, callback) => { //校验确认密码
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.adduser.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      dialogVisible: this.diaAddUsers,  //弹窗开关
      adduser: { //提交的数据
        username: '',
        password: '',
        checkpass: '',
        email: '',
        mobile: '',
      },
      rules: { //校验对象
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: ['change', 'blur'],
          },
          {
            min: 5,
            max: 10,
            message: '用户名长度在5~10个字符',
            trigger: 'blur',
          },
        ],
        password: [
          { validator: validatePass, trigger: ['change', 'blur'] },
        ],
        checkpass: [
          {
            validator: validatocheckpass,
            trigger: ['change', 'blur'],
          },
        ],
        email: [
          {
            required: true,
            message: '请输入邮箱地址',
            trigger: ['change', 'blur'],
          },
          {
            type: 'email',
            message: '请输入合法邮箱',
            trigger: ['blur', 'change'],
          },
        ],
        mobile: [
          {
            required: true,
            message: '请输入手机号码',
            trigger: ['change', 'blur'],
          },
          {
            min: 11,
            max: 11,
            message: '请输入正确的手机号码',
            trigger: ['change', 'blur'],
          },
        ],
      },
    }
  },
  props: {
    diaAddUsers: Boolean,
  },

  watch: {
    diaAddUsers() {  //监听父级开关
      this.dialogVisible = this.diaAddUsers
    },
  },
  methods: {
    close() {
      this.$emit('OutdiaAdd')
      this.$refs.form.resetFields()  //关闭弹窗时清空from
    },
    btnPostUser() {  //添加用户按钮
      this.$refs.form.validate((res) => {
        if (res) {
          this.$http.post('users', this.adduser).then((res) => {
            if (res.data.meta.status !== 201) {
              return this.$mess(res.data.meta.msg, 'error')
            }
            this.$mess(res.data.meta.msg, 'success')
            this.$emit('OutdiaAdd')
            this.$emit('getUser')
          })
        }
      })
    },
  },
}
</script>

<style>
</style>